<template>
  <div id="QcYoudenChart">
    <Splitpanes horizontal>
      <Pane size="45">
        <el-scrollbar style="height: 100%; width: 100%">
          <div id="youdenchart">
            <div
              ref="piechart"
              id="Y-chartMain"
              :style="{
                width: '40%',
                height: '500px'
              }"
              v-loading="loading"
            ></div>
          </div>
        </el-scrollbar>
      </Pane>
      <Pane size="55">
        <el-row :gutter="10">
          <el-col :span="12">
            <vxe-toolbar perfect>
              <template #buttons>
                <span>第二象限：共{{ chartList2.length }}个</span>
              </template>
            </vxe-toolbar>
            <div style="height: calc(100% - 40px)">
              <vxe-table
                ref="youdenTable2"
                v-loading="loading"
                border
                height="100%"
                :data="chartList2"
                :row-config="{
                  isCurrent: true,
                  isHover: true
                }"
                :keyboard-config="{
                  isArrow: true,
                  isTab: true,
                  isEdit: true
                }"
                resizable
                show-overflow
              >
                <vxe-column field="qcDate" title="检测日期" width="100" align="center">
                  <template #default="{ row }">
                    <span>{{ formatDateTime(row.qcDate, 'yyyy-MM-dd') }}</span>
                  </template>
                </vxe-column>
                <vxe-colgroup title="主质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="main"
                    title="结果"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="次质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.sub.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="sub"
                    title="次质控物"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.sub ? row.sub.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-column title="状态" width="60" align="center">
                  <template #default="{ row }">
                    <span
                      :style="{
                        color: row.outlier ? 'red' : ''
                      }"
                    >
                      {{ row.outlier ? '离群' : '正常' }}
                    </span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </el-col>
          <el-col :span="12">
            <vxe-toolbar perfect>
              <template #buttons>
                <span>第一象限：共{{ chartList1.length }}个</span>
              </template>
            </vxe-toolbar>
            <div style="height: calc(100% - 40px)">
              <vxe-table
                ref="youdenTable1"
                v-loading="loading"
                border
                height="100%"
                :data="chartList1"
                :row-config="{
                  isCurrent: true,
                  isHover: true
                }"
                :keyboard-config="{
                  isArrow: true,
                  isTab: true,
                  isEdit: true
                }"
                resizable
                show-overflow
              >
                <vxe-column field="qcDate" title="检测日期" width="100" align="center">
                  <template #default="{ row }">
                    <span>{{ formatDateTime(row.qcDate, 'yyyy-MM-dd') }}</span>
                  </template>
                </vxe-column>
                <vxe-colgroup title="主质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="main"
                    title="结果"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="次质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.sub.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="sub"
                    title="次质控物"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.sub ? row.sub.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-column title="状态" width="60" align="center">
                  <template #default="{ row }">
                    <span
                      :style="{
                        color: row.outlier ? 'red' : ''
                      }"
                    >
                      {{ row.outlier ? '离群' : '正常' }}
                    </span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </el-col>
          <el-col :span="12">
            <vxe-toolbar perfect>
              <template #buttons>
                <span>第三象限：共{{ chartList3.length }}个</span>
              </template>
            </vxe-toolbar>
            <div style="height: calc(100% - 40px)">
              <vxe-table
                ref="youdenTable3"
                v-loading="loading"
                border
                height="100%"
                :data="chartList3"
                :row-config="{
                  isCurrent: true,
                  isHover: true
                }"
                :keyboard-config="{
                  isArrow: true,
                  isTab: true,
                  isEdit: true
                }"
                resizable
                show-overflow
              >
                <vxe-column field="qcDate" title="检测日期" width="100" align="center">
                  <template #default="{ row }">
                    <span>{{ formatDateTime(row.qcDate, 'yyyy-MM-dd') }}</span>
                  </template>
                </vxe-column>
                <vxe-colgroup title="主质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="main"
                    title="结果"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="次质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.sub.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="sub"
                    title="次质控物"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.sub ? row.sub.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-column title="状态" width="60" align="center">
                  <template #default="{ row }">
                    <span
                      :style="{
                        color: row.outlier ? 'red' : ''
                      }"
                    >
                      {{ row.outlier ? '离群' : '正常' }}
                    </span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </el-col>
          <el-col :span="12">
            <vxe-toolbar perfect>
              <template #buttons>
                <span>第四象限：共{{ chartList4.length }}个</span>
              </template>
            </vxe-toolbar>
            <div style="height: calc(100% - 40px)">
              <vxe-table
                ref="youdenTable4"
                v-loading="loading"
                border
                height="100%"
                :data="chartList4"
                :row-config="{
                  isCurrent: true,
                  isHover: true
                }"
                :keyboard-config="{
                  isArrow: true,
                  isTab: true,
                  isEdit: true
                }"
                resizable
                show-overflow
              >
                <vxe-column field="qcDate" title="检测日期" width="100" align="center">
                  <template #default="{ row }">
                    <span>{{ formatDateTime(row.qcDate, 'yyyy-MM-dd') }}</span>
                  </template>
                </vxe-column>
                <vxe-colgroup title="主质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="main"
                    title="结果"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.main ? row.main.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="次质控物" header-align="center">
                  <vxe-column field="qcSequence" title="次数" width="40" header-align="center">
                    <template #default="{ row }">
                      <span>{{ row.main ? row.sub.qcSequence : '' }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column
                    field="sub"
                    title="次质控物"
                    width="80"
                    header-align="center"
                    align="right"
                  >
                    <template #default="{ row }">
                      <span>{{ row.sub ? row.sub.result : '' }}</span>
                    </template>
                  </vxe-column>
                </vxe-colgroup>
                <vxe-column title="状态" width="60" align="center">
                  <template #default="{ row }">
                    <span
                      :style="{
                        color: row.outlier ? 'red' : ''
                      }"
                    >
                      {{ row.outlier ? '离群' : '正常' }}
                    </span>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </el-col>
        </el-row>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
import { Ref, ref, defineExpose, reactive, getCurrentInstance, onMounted } from 'vue';
import { ECharts, EChartsOption, init } from 'echarts';
import { formatDateTime } from '@/utils/common';
import { Splitpanes, Pane } from 'splitpanes';

defineExpose({
  getEchartData
});

let { proxy }: any = getCurrentInstance();
const piechart: Ref<HTMLElement | null> = ref(null);
const chartHeight = ref('');
const resultForm = reactive({
  rptGroupId: null, //报告单元id
  rptGroupName: '',
  // selectWorkTeam: '', //选中的子工作组id
  insId: null, //仪器
  insName: '',
  insAnsId: null, //仪器项目
  qcItemId: null, //项目
  itemDictId: null,
  ansName: '',
  iqcMaterialIds: [],
  QCDateS: null, //开始时间
  QCDateE: null, //结束时间
  ccv: null
});
const chartList1 = reactive([]); //第一象限列表数据
const chartList2 = reactive([]); //第二象限列表数据
const chartList3 = reactive([]); //第三象限列表数据
const chartList4 = reactive([]); //第四象限列表数据
const chartData = reactive({
  results: []
});

// 方法定义区
function getEchartData(iqcResultForm: any, height: any) {
  chartHeight.value = height;
  if (iqcResultForm.iqcMaterialIds.length !== 2) {
    proxy.$XModal.message({
      content: '请勾选2个质控物',
      status: 'warning'
    });
    // this.chartData = {} as any;
    chartList1.length = 0;
    chartList2.length = 0;
    chartList3.length = 0;
    chartList4.length = 0;
    return;
  }
  Object.assign(resultForm, iqcResultForm);

  let url = '/api/qc/chart/getYouDenData';
  let obj = {
    itemDictId: resultForm.itemDictId,
    QcMaterialIds: resultForm.iqcMaterialIds,
    QCDateS: resultForm.QCDateS,
    QCDateE: resultForm.QCDateE
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      if (res.data && res.data.results && res.data.results.length > 0) {
        initChart(res.data);
        settableData(res.data.results);
      } else {
        clearCanvas();
        chartList1.length = 0;
        chartList2.length = 0;
        chartList3.length = 0;
        chartList4.length = 0;
      }
    })
    .catch((err) => {
      proxy.$alert(err, '提示');
      // this.loading = false;
    });
}
// 清除画布
function clearCanvas() {
  const myChart = init(piechart.value as HTMLElement);
  myChart.clear(); // 清除画布
}
function settableData(data) {
  data.forEach((item) => {
    if (item.quadrant === 1) {
      chartList1.push(item);
    } else if (item.quadrant === 2) {
      chartList2.push(item);
    } else if (item.quadrant === 3) {
      chartList3.push(item);
    } else if (item.quadrant === 4) {
      chartList4.push(item);
    }
  });
}
function initChart(val) {
  // 图表宽度自适应
  const chartBox = document.getElementById('youdenchart');
  const chartDom = document.getElementById('Y-chartMain');
  //图表宽高计算
  // this.chartssize(chartBox, chartDom);
  const myChart = init(piechart.value as HTMLElement);

  // this.chart = myChart;

  const yAxisData = [];
  const xAxisData = [];
  const seriesData = []; //离散点数组
  const regreData = []; //根据离散点画回归线的数据
  const ovalData = []; //画椭圆的数组
  const sd2Data = [
    [-2 * val.mainSD, -2 * val.subSD],
    [2 * val.mainSD, -2 * val.subSD],
    [2 * val.mainSD, 2 * val.subSD],
    [-2 * val.mainSD, 2 * val.subSD],
    [-2 * val.mainSD, -2 * val.subSD]
  ]; //画2sd矩形框的数组
  const sd3Data = [
    [-3 * val.mainSD, -3 * val.subSD],
    [3 * val.mainSD, -3 * val.subSD],
    [3 * val.mainSD, 3 * val.subSD],
    [-3 * val.mainSD, 3 * val.subSD],
    [-3 * val.mainSD, -3 * val.subSD]
  ]; //画3sd矩形框的数组

  for (let i = -4; i <= 4; i++) {
    xAxisData.push(parseFloat((val.mainSD * i).toFixed(3)));
    yAxisData.push(parseFloat((val.subSD * i).toFixed(3)));
  }
  val.results.forEach((item) => {
    seriesData.push({
      qcDate: item.qcDate,
      qcSequence: item.qcSequence,
      itemStyle: {
        color: item.outlier ? 'rgba(245, 108, 108,.9)' : 'rgba(64, 158, 255,.7)'
      },
      value: [item.main.chartResult, item.sub.chartResult],
      main: item.main,
      sub: item.sub
    });
    regreData.push([item.main.chartResult, item.sub.chartResult]);
  });
  val.ovalData.forEach((item, index) => {
    ovalData.push([item.chartX, item.chartY]);
  });
  const option = {
    title: {
      // text: '',
    },
    legend: {
      type: 'scroll'
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        // type: 'line',//指示器
      },
      confine: true, //是否将 tooltip 框限制在图表的区域内
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderRadius: 5,
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
      padding: [5, 10],
      textStyle: {
        color: '#333'
      },
      formatter: proxy.formatter
    },
    toolbox: {
      feature: {
        saveAsImage: {
          title: '保存为图片',
          name: 'Youden图-' + formatDateTime(new Date(), 'yyyy-MM-dd'),
          type: 'png'
        }
      },
      right: 20
    },
    grid: {
      top: '50px',
      bottom: '50px',
      left: '50px',
      right: '10px'
    },
    xAxis: [
      {
        type: 'value',
        axisLine: {
          show: false
        },
        axisLabel: {
          interval: 0
        } //强制显示所有坐标
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          interval: 0
        }
      }
    ],
    // dataset: [
    //     {
    //         source: regreData,
    //     },
    //     {
    //         transform: {
    //             type: 'ecStat:regression',
    //         },
    //     },
    // ], //画回归线
    series: [
      {
        type: 'scatter',
        symbolSize: 10,
        data: seriesData
      },
      {
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 1,
        color: 'red',
        data: ovalData
      },
      {
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 1,
        lineStyle: {
          // type: 'dotted', //虚线
          width: 1
        },
        color: '#e6a23c',
        data: sd2Data
      },
      {
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 1,
        lineStyle: {
          width: 1
        },
        color: '#f56c6c',
        data: sd3Data
      }
    ]
  };

  myChart.setOption(option, true); //第二个参数 true 用来清除上次数据
}
</script>
<style lang="scss" scoped>
#iqcYoudenChart {
  height: 100%;
  .el-row {
    height: 100%;
    .el-col {
      height: 50%;
    }
  }
}
</style>
<style lang="scss" scoped>
#QcYoudenChart {
  height: 100%;
  #youdenchart {
    width: 100%;
    height: 100%;
  }
}

.iqcOutControlChart {
  .el-drawer__body {
    .iqcOutControl {
      width: 800px;
      margin: 0 auto;
    }
  }
}
</style>
